<template>
  <div>
    <!-- 登录页 -->
    <!-- 顶部 -->
  <van-nav-bar
  title="账号登录" left-arrow/>
  <!-- from表单 -->
  <van-form @submit="onSubmit">
  <van-field
    v-model="formLogin.username"
    name="用户名"
    placeholder="请输入账号"
    :rules="[{ required: true, message: '请输入账号',trigger: 'onChange' }]"
  />
  <van-field
    v-model="formLogin.password"
    type="password"
    name="密码"
    placeholder="请输入密码"
    :rules="[{ required: true, message: '请输入6位正确密码' ,trigger: 'onChange',pattern: /^\d{6}$/}]"
  />
  <div style="margin: 16px;">
    <van-button
    block type="primary"
    native-type="submit"
    :loading="isloading"
    :disabled="isloading"
      >登录</van-button>
  </div>
</van-form>
<router-link to="/signin" class="signin">还没有账号，去注册~</router-link>
  </div>
</template>

<script>
// import { loginApi } from '@/api'
import { mapActions } from 'vuex'
import { Notify } from 'vant'
export default {
  data () {
    return {
      formLogin: {
        username: 'hzhmqd',
        password: '123456'
      },
      isloading: false
    }
  },
  methods: {
    ...mapActions(['asyncLoginAction']),
    async onSubmit (values) {
    //   console.log('submit', values)
    //   const res = await loginApi(this.formLogin)
    //   console.log('res:', res)
      this.isloading = true
      try {
        await this.asyncLoginAction(this.formLogin)
        Notify({ type: 'success', message: '登录成功' })
        this.isloading = false
        this.$router.replace('/layout/home')
      } catch (err) {
        Notify({ type: 'warning', message: '用户名或密码错误' })
        this.isloading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
  /deep/.van-nav-bar__content{
    background-color: #21b97a;
    margin-bottom: 25px;
    .van-nav-bar__title{
      color: #fff;
      font-size: 18px;
    }
    .van-icon {
      color: #fff;
      width: 22px;
      height: 22px;
      line-height: 23px;
    }
  }
  /deep/ .van-cell {
    margin-bottom: 20px;
    height: 60px;
    font-size: 18px;
    line-height: 30px;
  }
  /deep/ .van-button {
    background-color: #21b97a;
    height: 50px;
    margin-bottom: 20px;
  }
  /deep/ .signin{
    font-size: 12px;
    color:black;
    display: flex;
    justify-content: center;
  }
</style>
